<style>
    body{
        background-color: cornsilk;
        width: 640px;
        color:dodgerblue;
        font-family: 'Noto Sans SC', sans-serif, 'consolas';
        text-align: center;
    }
    span.stress{
        color: hotpink;
        font-weight: bold;
    }
    table{
        display: inline-block;
        font-size: 1rem;
    }
    td{
        text-align: center;
    }
    td:nth-of-type(1) {
        width: 40px;
    }
    td:nth-of-type(2) {
        width: 40px;
    }
    td:nth-of-type(2) img{
        width: 32px;
        height: 32px;
        border-radius: 32px;
    }
    td:nth-of-type(3) {
        width: 4rem;
    }
    td:nth-of-type(4) {
        width: 12rem;
    }
    td:nth-of-type(5) {
        width: 6rem;
    }
    td:nth-of-type(6) {
        width: 8rem;
    }
    p.note{
        font-size: 0.8rem;
        color: skyblue;
    }
</style>
<div>
    <h3>咕Bot - 资历排名查询</h3>
    <p>查询条件：<span class="stress">{{search.sect}}</span> <span class="stress">{{search.server}}</span></p>
    <table>
        <tbody>
            {{each datas}}
            <tr>
                <td>{{`${($index + 1)}`.padStart(2, '0')}}</td>
                <td><img src="{{$value.avatar}}" alt="{{$value.school}}"></td>
                <td>{{$value.school}}</td>
                <td>{{$value.role}}</td>
                <td>{{$value.score}}</td>
                <td>{{$value.server}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <p class="note">
        数据来源<span class="stress">{{dataSource}}</span> <br />
        数据获取时间<span class="stress">{{time}}</span> <br />
        本机器人是开源免费的机器人，有需要请加群<span class="stress">116523057</span>获取
    </p>
</div>